<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户资料 - 个人空间</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }
        
        /* 头部横幅样式 */
        .profile-header {
            position: relative;
            height: 250px;
            overflow: hidden;
        }
        
        .cover-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .profile-actions {
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 2;
        }
        
        /* 个人信息主区域 */
        .avatar-container {
            position: absolute;
            bottom: -70px;
            left: 2rem;
            z-index: 2;
        }
        
        .avatar {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            border: 5px solid white;
            object-fit: cover;
            box-shadow: 0 3px 10px rgba(0,0,0,0.15);
        }
        
        /* 资料卡片样式 */
        .profile-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .profile-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .card-title {
            font-weight: 700;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #0d6efd;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        /* 资料内容样式 */
        .profile-main {
            padding-top: 80px;
            padding-left: 180px;
        }
        
        .profile-name {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }
        
        .profile-title {
            color: #6c757d;
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }
        
        .info-row {
            margin-bottom: 1rem;
            display: flex;
            flex-wrap: wrap;
        }
        
        .info-item {
            flex: 1;
            min-width: 250px;
            padding: 0.5rem 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .info-icon {
            width: 30px;
            height: 30px;
            background-color: #e6f0ff;
            color: #0d6efd;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .info-label {
            font-weight: 500;
            color: #495057;
            min-width: 80px;
        }
        
        .info-value {
            color: #333;
        }
        
        .info-value a {
            color: #0d6efd;
            text-decoration: none;
        }
        
        .info-value a:hover {
            text-decoration: underline;
        }
        
        /* 统计数据样式 */
        .stats-container {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin: 1.5rem 0;
        }
        
        .stat-card {
            flex: 1;
            min-width: 120px;
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            text-align: center;
            border: 1px solid #eee;
        }
        
        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: #0d6efd;
            margin-bottom: 0.25rem;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: #6c757d;
        }
        
        /* 兴趣爱好标签 */
        .hobby-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-top: 1rem;
        }
        
        .hobby-tag {
            background-color: #e9f5ff;
            color: #0d6efd;
            padding: 0.35rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        /* 导航样式 */
        .profile-nav {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 1.5rem;
        }
        
        .nav-tabs {
            border-bottom: none;
        }
        
        .nav-link {
            color: #6c757d;
            border: none;
            padding: 1rem 1.5rem;
            font-weight: 500;
            border-radius: 0;
        }
        
        .nav-link.active {
            color: #0d6efd;
            border-bottom: 3px solid #0d6efd;
            background-color: transparent;
        }
        
        .nav-link:hover {
            color: #0d6efd;
            background-color: #f8f9fa;
        }
        
        /* 时间线样式 */
        .timeline {
            position: relative;
            padding-left: 2rem;
            margin-top: 1rem;
        }
        
        .timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background-color: #e9ecef;
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 1.5rem;
        }
        
        .timeline-dot {
            position: absolute;
            left: -2.35rem;
            top: 0;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: #0d6efd;
            border: 3px solid white;
        }
        
        .timeline-content {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
        }
        
        .timeline-date {
            font-size: 0.85rem;
            color: #6c757d;
            margin-bottom: 0.25rem;
        }
        
        .timeline-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .timeline-text {
            font-size: 0.95rem;
            color: #495057;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .profile-header {
                height: 200px;
            }
            
            .profile-main {
                padding-left: 1rem;
                text-align: center;
            }
            
            .avatar-container {
                left: 50%;
                transform: translateX(-50%);
            }
            
            .stats-container {
                justify-content: center;
            }
            
            .info-item {
                justify-content: center;
            }
            
            .hobby-tags {
                justify-content: center;
            }
        }
        
        @media (max-width: 576px) {
            .profile-header {
                height: 150px;
            }
            
            .avatar {
                width: 120px;
                height: 120px;
            }
            
            .nav-link {
                padding: 0.75rem;
                font-size: 0.9rem;
            }
            
            .stat-card {
                min-width: 100px;
                padding: 0.75rem;
            }
            
            .stat-value {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container py-4">
        <!-- 头部横幅区域 -->
        <div class="profile-header mb-4 rounded-3 overflow-hidden">
            <img src="https://picsum.photos/id/1015/1600/800" alt="封面照片" class="cover-photo">
            <div class="profile-actions">
                <button class="btn btn-primary me-2">
                    <i class="fas fa-user-plus me-1"></i> 关注
                </button>
                <button class="btn btn-outline-light">
                    <i class="fas fa-edit me-1"></i> 编辑资料
                </button>
            </div>
            <div class="avatar-container">
                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="avatar">
            </div>
        </div>
        
        <!-- 导航选项卡 -->
        <div class="profile-nav">
            <ul class="nav nav-tabs justify-content-start">
                <li class="nav-item">
                    <a class="nav-link" href="#home">
                        <i class="fas fa-home me-1"></i> 首页
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#profile">
                        <i class="fas fa-user me-1"></i> 资料
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#posts">
                        <i class="fas fa-comment me-1"></i> 动态
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#photos">
                        <i class="fas fa-images me-1"></i> 相册
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#friends">
                        <i class="fas fa-users me-1"></i> 好友
                    </a>
                </li>
            </ul>
        </div>
        
        <!-- 主内容区域 -->
        <div class="row">
            <!-- 左侧主资料区 -->
            <div class="col-lg-8">
                <!-- 基本资料卡片 -->
                <div class="profile-card">
                    <h3 class="card-title">
                        <i class="fas fa-id-card"></i> 基本资料
                    </h3>
                    
                    <div class="profile-main">
                        <h1 class="profile-name">李明</h1>
                        <div class="profile-title">产品设计师 @ 科技创新公司</div>
                        
                        <p class="text-muted mb-4">
                            热爱设计与创意，专注于用户体验与交互设计。喜欢摄影、旅行和分享生活中的美好瞬间。
                            欢迎交流设计理念与创意想法！
                        </p>
                        
                        <div class="stats-container">
                            <div class="stat-card">
                                <div class="stat-value">248</div>
                                <div class="stat-label">动态</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value">1.2k</div>
                                <div class="stat-label">粉丝</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value">356</div>
                                <div class="stat-label">关注</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value">4.8k</div>
                                <div class="stat-label">获赞</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="info-row">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="info-label">所在地</div>
                            <div class="info-value">北京市 朝阳区</div>
                        </div>
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-birthday-cake"></i>
                            </div>
                            <div class="info-label">生日</div>
                            <div class="info-value">1990年5月15日</div>
                        </div>
                    </div>
                    
                    <div class="info-row">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-graduation-cap"></i>
                            </div>
                            <div class="info-label">教育经历</div>
                            <div class="info-value">清华大学 设计学院</div>
                        </div>
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-briefcase"></i>
                            </div>
                            <div class="info-label">工作单位</div>
                            <div class="info-value">科技创新公司</div>
                        </div>
                    </div>
                    
                    <div class="info-row">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-link"></i>
                            </div>
                            <div class="info-label">个人网站</div>
                            <div class="info-value"><a href="https://example.com" target="_blank">www.liming.design</a></div>
                        </div>
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-calendar-plus"></i>
                            </div>
                            <div class="info-label">加入时间</div>
                            <div class="info-value">2020年3月18日</div>
                        </div>
                    </div>
                    
                    <div class="info-row">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="info-label">邮箱</div>
                            <div class="info-value">liming@example.com</div>
                        </div>
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div class="info-label">电话</div>
                            <div class="info-value">138****5678</div>
                        </div>
                    </div>
                </div>
                
                <!-- 个人经历卡片 -->
                <div class="profile-card">
                    <h3 class="card-title">
                        <i class="fas fa-history"></i> 个人经历
                    </h3>
                    
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <div class="timeline-date">2021年3月 - 至今</div>
                                <div class="timeline-title">科技创新公司 | 产品设计师</div>
                                <div class="timeline-text">负责公司核心产品的用户体验设计与交互设计，主导产品界面改版，提升用户满意度35%。</div>
                            </div>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <div class="timeline-date">2018年6月 - 2021年2月</div>
                                <div class="timeline-title">未来设计工作室 | UI设计师</div>
                                <div class="timeline-text">参与多个移动应用和网站的UI设计工作，负责从概念到原型再到视觉设计的全流程。</div>
                            </div>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <div class="timeline-date">2014年9月 - 2018年6月</div>
                                <div class="timeline-title">清华大学 | 设计学院 | 本科</div>
                                <div class="timeline-text">主修产品设计专业，辅修交互设计，获校级优秀毕业生称号，毕业设计获学院金奖。</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧边栏 -->
            <div class="col-lg-4">
                <!-- 兴趣爱好 -->
                <div class="profile-card">
                    <h3 class="card-title">
                        <i class="fas fa-heart"></i> 兴趣爱好
                    </h3>
                    
                    <div class="hobby-tags">
                        <span class="hobby-tag">
                            <i class="fas fa-camera"></i> 摄影
                        </span>
                        <span class="hobby-tag">
                            <i class="fas fa-plane"></i> 旅行
                        </span>
                        <span class="hobby-tag">
                            <i class="fas fa-paint-brush"></i> 绘画
                        </span>
                        <span class="hobby-tag">
                            <i class="fas fa-book"></i> 阅读
                        </span>
                        <span class="hobby-tag">
                            <i class="fas fa-film"></i> 电影
                        </span>
                        <span class="hobby-tag">
                            <i class="fas fa-music"></i> 音乐
                        </span>
                        <span class="hobby-tag">
                            <i class="fas fa-utensils"></i> 美食
                        </span>
                        <span class="hobby-tag">
                            <i class="fas fa-hiking"></i> 徒步
                        </span>
                    </div>
                </div>
                
                <!-- 技能特长 -->
                <div class="profile-card">
                    <h3 class="card-title">
                        <i class="fas fa-star"></i> 技能特长
                    </h3>
                    
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span>产品设计</span>
                            <span>95%</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 95%"></div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span>UI设计</span>
                            <span>90%</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 90%"></div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span>交互设计</span>
                            <span>88%</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 88%"></div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span>原型设计</span>
                            <span>85%</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 85%"></div>
                        </div>
                    </div>
                    
                    <div>
                        <div class="d-flex justify-content-between mb-1">
                            <span>摄影</span>
                            <span>75%</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 75%"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 语言能力 -->
                <div class="profile-card">
                    <h3 class="card-title">
                        <i class="fas fa-language"></i> 语言能力
                    </h3>
                    
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>中文</span>
                            <span class="badge bg-success">母语</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>英语</span>
                            <span class="badge bg-primary">专业熟练</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>日语</span>
                            <span class="badge bg-info">日常交流</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 个人成就 -->
                <div class="profile-card">
                    <h3 class="card-title">
                        <i class="fas fa-trophy"></i> 个人成就
                    </h3>
                    
                    <ul class="list-unstyled">
                        <li class="d-flex gap-3 mb-3 pb-3 border-bottom">
                            <div class="bg-primary/10 p-2 rounded">
                                <i class="fas fa-award text-primary"></i>
                            </div>
                            <div>
                                <div class="font-weight-medium">2022年度最佳设计师</div>
                                <div class="text-sm text-muted">科技创新公司</div>
                            </div>
                        </li>
                        <li class="d-flex gap-3 mb-3 pb-3 border-bottom">
                            <div class="bg-primary/10 p-2 rounded">
                                <i class="fas fa-medal text-primary"></i>
                            </div>
                            <div>
                                <div class="font-weight-medium">全国UI设计大赛金奖</div>
                                <div class="text-sm text-muted">2021年</div>
                            </div>
                        </li>
                        <li class="d-flex gap-3">
                            <div class="bg-primary/10 p-2 rounded">
                                <i class="fas fa-certificate text-primary"></i>
                            </div>
                            <div>
                                <div class="font-weight-medium">UX设计师认证</div>
                                <div class="text-sm text-muted">国际设计协会</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 导航选项卡切换
            const navLinks = document.querySelectorAll('.nav-link');
            
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有激活状态
                    navLinks.forEach(l => l.classList.remove('active'));
                    
                    // 添加当前激活状态
                    this.classList.add('active');
                    
                    // 这里可以添加页面内容切换逻辑
                    const targetId = this.getAttribute('href').substring(1);
                    console.log(`切换到 ${targetId} 页面`);
                });
            });
        });
    </script>
</body>
</html>

